<template>
  <div>
    <div v-permission="['base-data:coupon:query']">
      <page-wrapper content-full-height fixed-height>
        <!-- 数据列表 -->
        <vxe-grid
          id="Coupon"
          ref="grid"
          resizable
          show-overflow
          highlight-hover-row
          keep-source
          row-id="id"
          :proxy-config="proxyConfig"
          :columns="tableColumn"
          :toolbar-config="toolbarConfig"
          :custom-config="{}"
          :pager-config="{}"
          :loading="loading"
          height="auto"
        >
          <template #form>
            <j-border>
              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                <j-form-item label="卡券名称">
                  <a-input v-model:value="searchFormData.couponName" allow-clear />
                </j-form-item>
                <j-form-item label="发放方式">
                  <a-select v-model:value="searchFormData.sendWay" allow-clear>
                    <a-select-option
                      v-for="item in $enums.SEND_WAY.values()"
                      :key="item.code"
                      :value="item.code"
                      >{{ item.desc }}</a-select-option
                    >
                  </a-select>
                </j-form-item>
                <j-form-item label="状态">
                  <a-select v-model:value="searchFormData.available" allow-clear>
                    <a-select-option
                      v-for="item in $enums.AVAILABLE.values()"
                      :key="item.code"
                      :value="item.code"
                      >{{ item.desc }}</a-select-option
                    >
                  </a-select>
                </j-form-item>
              </j-form>
            </j-border>
          </template>
          <!-- 工具栏 -->
          <template #toolbar_buttons>
            <a-space>
              <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
              <a-button
                v-permission="['base-data:coupon:add']"
                type="primary"
                :icon="h(PlusOutlined)"
                @click="$refs.addDialog.openDialog()"
              >
                新增
              </a-button>
              <a-button type="primary" @click="$refs.couponGrantDialog.openDialog()">
                发放卡券
              </a-button>
            </a-space>
          </template>

          <!-- 卡券类型 列自定义内容 -->
          <template #couponType_default="{ row }">
            {{ $enums.COUPON_TYPE.getDesc(row.couponType) }}
          </template>

          <!-- 发放方式 列自定义内容 -->
          <template #sendWay_default="{ row }">
            {{ $enums.SEND_WAY.getDesc(row.sendWay) }}
          </template>

          <template #useCondition_default="{ row }">
            {{ row.useCondition === 0 ? '无限制' : formatAmount(row.useCondition) }}
          </template>

          <!-- 状态 列自定义内容 -->
          <template #available_default="{ row }">
            <available-tag :available="row.available" />
          </template>

          <!-- 适用商品 列自定义内容 -->
          <template #productAll_default="{ row }">
            <span v-if="row.productAll">所有商品</span>
            <span v-else>
              {{ row.products.map((item) => item.productName).join('、') }}
            </span>
          </template>

          <!-- 适用门店 列自定义内容 -->
          <template #stopAll_default="{ row }">
            <span v-if="row.stopAll">所有门店</span>
            <span v-else>
              {{ row.stops.map((item) => item.stopName).join('、') }}
            </span>
          </template>

          <!-- 操作 列自定义内容 -->
          <template #action_default="{ row }">
            <a-button
              v-permission="['base-data:coupon:query']"
              type="link"
              @click="
                (e) => {
                  id = row.id;
                  $nextTick(() => $refs.viewDialog.openDialog());
                }
              "
            >
              查看
            </a-button>
            <a-button
              v-permission="['base-data:coupon:modify']"
              type="link"
              @click="
                (e) => {
                  id = row.id;
                  $nextTick(() => $refs.updateDialog.openDialog());
                }
              "
            >
              修改
            </a-button>
          </template>
        </vxe-grid>
      </page-wrapper>
    </div>
    <!-- 新增窗口 -->
    <add ref="addDialog" @confirm="search" />

    <!-- 修改窗口 -->
    <modify :id="id" ref="updateDialog" @confirm="search" />

    <!-- 查看窗口 -->
    <detail :id="id" ref="viewDialog" />

    <!-- 发放窗口 -->
    <coupon-grant :coupon-type="1" ref="couponGrantDialog" />
  </div>
</template>

<script>
  import { h, defineComponent } from 'vue';
  import Add from './add.vue';
  import Modify from './modify.vue';
  import Detail from './detail.vue';
  import * as api from '@/api/base-data/coupon';
  import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue';
  import CouponGrant from '@/views/base-data/coupon/coupon-grant.vue';

  export default defineComponent({
    name: 'CouponInfo',
    components: {
      CouponGrant,
      Add,
      Modify,
      Detail,
    },
    setup() {
      return {
        h,
        PlusOutlined,
        SearchOutlined,
      };
    },
    data() {
      return {
        loading: false,
        // 当前行数据
        id: '',
        // 查询列表的查询条件
        searchFormData: {
          couponType: [1],
          couponName: '',
          sendWay: [],
          available: [],
        },
        // 工具栏配置
        toolbarConfig: {
          // 自定义左侧工具栏
          slots: {
            buttons: 'toolbar_buttons',
          },
        },
        // 列表数据配置
        tableColumn: [
          { type: 'seq', width: 50 },
          {
            field: 'couponType',
            title: '卡券类型',
            minWidth: 100,
            slots: { default: 'couponType_default' },
          },
          { field: 'couponName', title: '卡券名称', minWidth: 150 },
          {
            field: 'sendWay',
            title: '发放方式',
            width: 100,
            slots: { default: 'sendWay_default' },
          },
          { field: 'price', title: '售价', width: 100, formatter: this.formatAmount },
          { field: 'parValue', title: '卡券面值', width: 100, formatter: this.formatAmount },
          { field: 'added', title: '增值', width: 100, formatter: this.formatPercentage },
          { field: 'effectiveDay', title: '有效期', width: 100, formatter: this.formatDay },
          {
            field: 'useCondition',
            title: '使用条件',
            width: 100,
            slots: { default: 'useCondition_default' },
          },
          {
            field: 'available',
            title: '状态',
            width: 100,
            slots: { default: 'available_default' },
          },
          {
            field: 'productAll',
            title: '适用商品',
            width: 100,
            slots: { default: 'productAll_default' },
          },
          {
            field: 'stopAll',
            title: '适用门店',
            width: 100,
            slots: { default: 'stopAll_default' },
          },
          { field: 'createBy', title: '创建人', width: 100 },
          { field: 'createTime', title: '创建时间', width: 170 },
          { field: 'updateBy', title: '修改人', width: 100 },
          { field: 'updateTime', title: '修改时间', width: 170 },
          { title: '操作', width: 120, fixed: 'right', slots: { default: 'action_default' } },
        ],
        // 请求接口配置
        proxyConfig: {
          props: {
            // 响应结果列表字段
            result: 'datas',
            // 响应结果总条数字段
            total: 'totalCount',
          },
          ajax: {
            // 查询接口
            query: ({ page }) => {
              return api.query(this.buildQueryParams(page));
            },
          },
        },
      };
    },
    created() {},
    methods: {
      // 列表发生查询时的事件
      search() {
        this.$refs.grid.commitProxy('reload');
      },
      // 查询前构建查询参数结构
      buildQueryParams(page) {
        return Object.assign(
          {
            pageIndex: page.currentPage,
            pageSize: page.pageSize,
          },
          this.buildSearchFormData(),
        );
      },
      // 查询前构建具体地查询参数
      buildSearchFormData() {
        return {
          couponTypes: this.searchFormData.couponType.join(','),
          couponName: this.searchFormData.couponName,
          sendWays: this.searchFormData.sendWay.join(','),
          availables: this.searchFormData.available.join(','),
        };
      },
      // 格式化金额
      formatAmount(data) {
        let num = typeof data === 'number' ? data : data.cellValue;
        return '￥ ' + Number.parseFloat(num || 0).toFixed(2);
      },
      // 格式化百分比
      formatPercentage(data) {
        return Number.parseFloat(data?.cellValue || 0).toFixed(2) + ' %';
      },
      // 格式化日
      formatDay(data) {
        let day = Number.parseFloat(data?.cellValue || 0);
        return day ? day + ' 天' : '永久';
      },
    },
  });
</script>

<style scoped></style>
